<template>
	<view class="main">
		<!-- 详情页 -->
		<image :src="details.cate_logo" mode="widthFix"></image>
		<view class="price">￥{{details.price}}</view>
		<view>{{details.cate_name}}</view>
		<view>活动风格：{{details.title}}</view>
		<view>地点：{{details.province.name}}{{details.city.name}}{{details.area.name}}{{details.address}}</view>
		<image lazy-load :src="item.image" :key="index" mode="widthFix" v-for='(item,index) in details.images'></image>
		<button @click="showOrHide" class="btn-primary btn-foot">去预约</button>
		<footer-index class="bottomCom"></footer-index>
		<select-pro class="select-pro" @showOrHide="showOrHide" :showModel="showModel" :activeName="details.cate_name" :proId="details.id"></select-pro>
	</view>
</template>

<script>
	import {getProductDetail} from '@/service/detail.js';
	import {isPoneAvailable} from '@/utils/reg.js'
	import {format} from '@/utils/getTime.js'
	import selectPro from '@/components/selectPro/selectPro.vue'
	import footerIndex from '@/components/footer/footer.vue'
	import {getProductList,getProductPrice,payment,requestPayment,notifying} from '@/service/common.js';
	export default {
		name: "Detail",
		components: {
			footerIndex,
			selectPro
		},
		data() {
			return {
				details:{},
				showModel: false, // 点击底部确定时显示隐藏  true 显示  false 隐藏
				sendState: 0, // 调用提交订单次数
				maxNum: 3, // 最多提交3次，还是报错就不再提交
			}
		},
		onLoad(options) {
			this._getProductDetail(options.id)
			let day = new Date();
			day.setTime(day.getTime() + 24 * 60 * 60 * 1000);
			this.startTime = format("yyyy-MM-dd", day);
			this.dateTime = format("yyyy年MM月dd日", day)
			this.dateTime1 = format("yyyy-MM-dd", day);
			this.dateTime2 = format("yyyy-MM-dd", day).split('-')
		},
		methods: {
			_getProductDetail(id) {
				getProductDetail(id).then(res => {
					this.details = res.data.category
				})
			},
			showOrHide(){
				this.showModel=!this.showModel
			}
		}
	}
</script>

<style scoped>
	.main {
		width: 710rpx;
		margin: 0 20rpx;
	}

	.main view:not(.select-pro) {
		text-align: center;
		font-size: 28rpx;
		color: #333;
		margin: 0 20rpx 10rpx;
	}

	image {
		width: 100%;
	}

	.main view.price {
		color: #970000;
		font-size: 40rpx;
		font-weight: bold;
		margin-top: 20rpx;
	}

	.describe {
		width: 710rpx;
		margin: auto;
	}
	.bottomCom{
		position: relative;
		left: -20rpx;
	}
</style>
